
<template>
  <!--
    1 重新关闭按钮
    2 重写footer部分 countTime为倒计时
    3 content属性为内容 或者 默认插槽填充
  -->
  <Modal
    :value="show || configShow"
    :width="width"
    :footer-hide="false"
    :closable="false"
    @input="onCancel"
    @on-ok="ok"
    @on-cancel="onCancel"
    :mask-closable="maskClosable"
    :title="title"
  >
    <!-- 关闭按钮 -->
    <a
      v-if="closable"
      @click="onCancel"
      class="ivu-modal-close"
    ><i class="ivu-icon ivu-icon-ios-close"></i></a>
    <!-- 内容 和 插槽 -->
    <p v-text="content"></p>
    <slot></slot>
    <slot name="content"></slot>
    <!-- footer部分 确认按钮倒计时 -->
    <div slot="footer">
      <Button
        @click="onCancel"
        v-if="showCancel"
        v-text="cancelText"
      ></Button>
      <Button
        type="primary"
        @click="ok"
        v-if="showOk"
        :disabled="!!(countTime > 0 || okDisabled)"
      >
        {{okText}}
        <span v-if="countTime">({{countTime}}s)</span>
      </Button>
    </div>
  </Modal>
</template>

<script>
import { Modal, Spin, Button, Icon } from 'view-design'
export default {
  name: 'Dialog',
  components: { Modal, Spin, Button, Icon },
  props: {
    // 显示弹窗
    show: {
      type: Boolean,
      default: true
    },
    // 标题
    title: {
      type: String,
      default: '提示'
    },
    // 内容
    content: {
      type: String,
      default: ''
    },
    // 宽度
    width: {
      type: String,
      default: '800'
    },
    // 传入的参数 OK时会抛出
    params: {
      type: [Object, Array],
      default: Object
    },
    // 关闭按钮
    closable: {
      type: Boolean,
      default: false
    },
    // 点击遮罩是否关闭
    maskClosable: {
      type: Boolean,
      default: false
    },
    // 显示确认按钮
    showOk: {
      type: Boolean,
      default: true
    },
    // 显示取消按钮
    showCancel: {
      type: Boolean,
      default: true
    },
    // 确认按钮文本
    okText: {
      type: String,
      default: '确认'
    },
    // 取消按钮文本
    cancelText: {
      type: String,
      default: '取消'
    },
    // 确认按钮禁用
    okDisabled: {
      type: Boolean,
      default: false
    },
    // 确认按钮倒计时（秒）
    countDown: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      countTime: 0,
      timer: null,
      configShow: false
    }
  },
  confirm () {
    Modal.confirm({
      render: h => h('div', [
        h('div', 'aaaaaaaaaaaaa'),
        h(Button, 'aaaaaaaaaaaaa'),
        h(Button, 'aaaaaaaaaaaaa')
      ]),
      className: 'a--------',
      okText: 'OK',
      cancelText: 'Cancel'
    })
  },
  methods: {
    async onCancel () {
      // 绑定了自定义事件cancel时 关闭弹窗交由cancel事件
      if (this._events['on-cancel']) {
        this.$emit('on-cancel', false)
      } else {
        this.$emit('update:show', false)
        console.error('弹窗关闭提示：您没有设置自定义事件“on-cancel”，如您已使用“:show.sync”请忽略本提示')
      }
    },
    ok () {
      // 绑定了自定义事件ok时 关闭弹窗交由ok事件
      if (this._events['on-ok']) {
        this.$emit('on-ok', this.params)
      } else {
        this.$emit('update:show', false)
        console.error('弹窗关闭提示：您没有设置自定义事件“on-ok”，如您已使用“:show.sync”请忽略本提示')
      }
    }
  },
  watch: {
    show (v) {
      if (v && this.countDown > 0) {
        this.countTime = this.countDown
        clearInterval(this.timer)
        this.timer = setInterval(() => {
          if (this.countTime <= 0) {
            this.countTime = 0
            clearInterval(this.timer)
            return
          }
          this.countTime--
        }, 1000)
      }
    }
  }
}
</script>

<style lang="css" scoped>
.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;
}
.vertical-center-modal .ivu-modal {
  top: 0;
}
</style>
